<template>
  <div class="interview" v-if="currentQue.detail">
    <van-nav-bar>
      <template #left>
        <i
          @click="$router.go(-1)"
          class="icon iconfont iconbtn_nav_back leftArro"
        ></i>
      </template>
      <template #title>
        <div class="title">
          面试题 <sup>{{ questionList.length }}</sup>
        </div>
      </template>
      <template #right>
        <div @click="show = true">
          答题卡
        </div>
      </template>
    </van-nav-bar>
    <div class="main" v-if="currentQue" >
      <div class="quesTop">
        <span>【{{ typeObj[currentQue.detail.type] }}】</span>
        <span>{{ currentQue.detail.title }}</span>
      </div>
      <div class="tabs">
        <span v-for="(item, index) in currentQue.detail.tag" :key="index">
          {{ item }}</span
        >
      </div>
      <!-- 选项:单选 -->
      <div class="answer">
        <!-- 单选问题 -->
        <van-radio-group v-model="radio" v-if="currentQue.detail.type === 1">
          <van-radio
            :disabled="isRadio"
            clickable
            name="A"
            :class="setcss('A')"
          >
            <template #icon>
              <div class="alpha" style="margin-right: 10px ">
                A
              </div>
            </template>
            <template>
              <div class="option">
                <span>
                  {{ currentQue.detail.option[0] }}
                </span>
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </div>
            </template>
          </van-radio>
          <van-radio
            :disabled="isRadio"
            clickable
            name="B"
            :class="setcss('B')"
          >
            <template #icon>
              <div class="alpha" style="margin-right: 10px ">
                B
              </div>
            </template>
            <template>
              <div class="option">
                <span> {{ currentQue.detail.option[1] }}</span>
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </div>
            </template>
          </van-radio>
          <van-radio
            :disabled="isRadio"
            clickable
            name="C"
            :class="setcss('C')"
          >
            <template #icon>
              <div class="alpha" style="margin-right: 10px ">
                C
              </div>
            </template>
            <template>
              <div class="option">
                <span>{{ currentQue.detail.option[2] }}</span>
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </div>
            </template>
          </van-radio>
          <van-radio
            :disabled="isRadio"
            clickable
            name="D"
            :class="setcss('D')"
          >
            <template #icon>
              <div class="alpha" style="margin-right: 10px ">
                D
              </div>
            </template>
            <template>
              <div class="option">
                <span> {{ currentQue.detail.option[3] }}</span>
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </div>
            </template>
          </van-radio>
        </van-radio-group>
        <!-- 多选问题 -->
        {{ checkbox }}
        <van-checkbox-group
          v-model="checkbox"
          v-if="currentQue.detail.type === 2"
        >
          <van-checkbox
            :disabled="isRadio"
            clickable
            name="A"
            :class="setcss('A')"
          >
            <template #icon>
              <div class="alpha" style="margin-right: 10px ">
                A
              </div>
            </template>
            <template>
              <div class="option">
                <span>
                  {{ currentQue.detail.option[0] }}
                </span>
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </div>
            </template>
          </van-checkbox>
          <van-checkbox
            :disabled="isRadio"
            clickable
            name="B"
            :class="setcss('B')"
          >
            <template #icon>
              <div class="alpha" style="margin-right: 10px ">
                B
              </div>
            </template>
            <template>
              <div class="option">
                <span> {{ currentQue.detail.option[1] }}</span>
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </div>
            </template>
          </van-checkbox>
          <van-checkbox
            :disabled="isRadio"
            clickable
            name="C"
            :class="setcss('C')"
          >
            <template #icon>
              <div class="alpha" style="margin-right: 10px ">
                C
              </div>
            </template>
            <template>
              <div class="option">
                <span>{{ currentQue.detail.option[2] }}</span>
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </div>
            </template>
          </van-checkbox>
          <van-checkbox
            :disabled="isRadio"
            clickable
            name="D"
            :class="setcss('D')"
          >
            <template #icon>
              <div class="alpha" style="margin-right: 10px ">
                D
              </div>
            </template>
            <template>
              <div class="option">
                <span> {{ currentQue.detail.option[3] }}</span>
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </div>
            </template>
          </van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
    <div class="analyze" v-if="questionList[currentIndex].result">
      <h3>答案解析</h3>
      <div class="correAnswer">
        <span v-if="currentQue.detail.type === 1"
          >正确答案:{{ currentQue.result.singleAnswer }}</span
        >
        <span v-if="currentQue.detail.type === 2"
          >正确答案:{{ currentQue.result.multipleAnswer }}</span
        >
      </div>
      <div class="detail">
        <span>难度:{{ diffiObj[+currentQue.result.difficulty] }}</span
        ><span>提交次数:{{ currentQue.result.submitNum }}</span
        ><span>正确次数:{{ +currentQue.result.correctNum }}</span>
      </div>
      <div class="anacontent">{{ currentQue.result.answerAnalysis }}</div>
    </div>
    <div class="btmBar">
      <div class="one">
        <div class="collect"><van-icon name="star-o" /> <span>收藏</span></div>
        <div class="write"><van-icon name="edit" /> <span>反馈</span></div>
      </div>
      <div class="two">
        <div class="percentage">
          <span class="bigger">{{ currentIndex + 1 }}</span
          >/{{ questionList.length }}题
        </div>
        <div>
          <van-button
            color="#ee0a24"
            v-if="!isFinished && !questionList[currentIndex].result"
            :disabled="isDisabled"
            @click="submit"
            >提交</van-button
          >
        </div>
        <div>
          <van-button
            type="info"
            v-if="!isFinished && questionList[currentIndex].result"
            @click="getNext"
            >下一题</van-button
          >
        </div>
        <div>
          <van-button type="danger" v-if="isFinished" @click="endAnswer"
            >结束</van-button
          >
        </div>
      </div>
    </div>
    <!-- 答题卡 -->
    <van-popup v-model="show" position="top" :style="{ height: '90%' }">
      <van-nav-bar title="答题卡提">
        <template #right>
          <div>
            <span style="color:red">{{ currentIndex + 1 }}</span
            >/57题
          </div>
        </template>
      </van-nav-bar>
      <ul class="card">
        <li
          v-for="(item, index) in questionList"
          :key="index"
          :class="setlicss(item, index)"
          @click="liClick(index)"
        >
          {{ index + 1 }}
        </li>
      </ul>
    </van-popup>
  </div>
</template>
<script>
import { apiGetQueDetail, apiSubAnswer, apiGetNext } from '@/api/question'
export default {
  computed: {
    // 设置li属性
    setlicss () {
      return (item, index) => {
        if (item.result && item.result.isRight === true) {
          return 'liright'
        }
        if (item.result && item.result.isRight === false) {
          return 'lifalse'
        }
        if (this.currentIndex === index) {
          return 'liready'
        }
        return ''
      }
    },
    // 是否已经答完题目
    isFinished () {
      return this.questionList.every(item => {
        return item.result
      })
    },
    currentQue () {
      return this.questionList[this.currentIndex] || {}
    },
    // 按钮状态
    isDisabled () {
      if (this.currentQue.detail.type === 1) {
        return !this.radio
      }
      return false
    },
    // 单选框 样式
    setcss () {
      return str => {
        if (!this.currentQue.result) {
          return ''
        }
        if (this.currentQue.detail.type === 1) {
          if (this.currentQue.result.singleAnswer === str) {
            return 'right'
          }
          if (
            this.radio === str &&
            this.currentQue.result.singleAnswer !== str
          ) {
            return 'error'
          }
        }
        if (this.currentQue.detail.type === 2) {
          if (this.currentQue.result.multipleAnswer.includes(str)) {
            return 'right'
          }
          if (
            this.checkbox.includes(str) &&
            !this.currentQue.result.multipleAnswer.includes(str)
          ) {
            return 'error'
          }
        }
        return ''
      }
    },
    // 单选框是否选中
    isRadio () {
      if (this.currentQue.result) {
        return true
      }
      return false
    }
  },
  created () {
    this.typeId = this.$route.query.type
    this.city = this.$route.query.city
    this.getQuestion()
  },
  methods: {
    // li标签点击
    async liClick (index) {
      this.currentIndex = index
      if (!this.questionList[this.currentIndex].detail) {
        const res = await apiGetNext(this.questionList[this.currentIndex].id)
        this.$set(this.questionList[this.currentIndex], 'detail', res.data)
      }
      this.show = false
    },
    // 结束回答
    endAnswer () {
      this.$toast.success('恭喜你,终于答完所有题目了')
    },
    // 模拟面试
    async getQuestion () {
      const res = await apiGetQueDetail(this.typeId, this.city)
      console.log('面试详情', res)
      this.questionList = res.data
      // console.log(this.currentQue)
    },
    // 提交答案
    async submit () {
      const res = await apiSubAnswer({
        id: this.questionList[this.currentIndex].id,
        singleAnswer: this.radio
      })
      // console.log(res)
      this.result = res.data
      // 将答案返回信息存回问题对象中
      this.$set(this.questionList[this.currentIndex], 'result', res.data)
    },
    // 获取下一题
    async getNext () {
      if (
        this.currentIndex + 1 === this.questionList.length &&
        !this.isFinished
      ) {
        this.$toast.success('对不起,您还有题目未答完')
        return
      }
      this.currentIndex++
      const id = this.questionList[this.currentIndex].id
      const res = await apiGetNext(id)
      this.$set(this.questionList[this.currentIndex], 'detail', res.data)
      this.radio = ''
      this.checkbox = []
    }
  },
  data () {
    return {
      radio: '',
      // 职位类型id
      typeId: '',
      // 城市名
      city: '',
      // 类型对象
      typeObj: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 问题对象
      diffiObj: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 问题列表
      questionList: [],
      // 当前问题索引
      currentIndex: 0,
      // 提交问题返回的数据
      result: {},
      // 多选框绑定
      checkbox: [],
      // 绑定弹框
      show: false
    }
  }
}
</script>
<style lang="less" scoped>
.interview {
  font-size: 12px;
  margin-bottom: 120px;
  .title {
    font-size: 18px;
  }
  .main {
    padding: 25px 15px;
    .quesTop {
      font-size: 16px;
    }
    .tabs {
      margin: 10px 0 10px 0;
      span {
        background-color: #eee;
        font-size: 12px;
        color: #666;
      }
    }
    .answer {
      i {
        font-size: 24px;
        margin-left: 50px;
      }
      .van-radio,
      .van-checkbox {
        height: 48px;
        border: 1px solid transparent;
        box-sizing: border-box;
        padding: 0 15px;
        margin-bottom: 20px;
      }
      [aria-checked='true'] {
        border: 1px solid #666;
      }
    }
  }
  .analyze {
    padding: 0 15px;
  }
  .btmBar {
    display: flex;
    padding: 30px 15px;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    .one {
      flex: 1;
      display: flex;
      .collect,
      .write {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /deep/.van-icon-star-o {
          font-size: 24px;
          margin-bottom: 5px;
        }
        /deep/.van-icon-edit {
          font-size: 24px;
          margin-bottom: 5px;
        }
      }
      .collect {
        margin-right: 20px;
      }
    }
    .two {
      flex: 1;
      display: flex;
      align-items: center;
      .percentage {
        margin-right: 30px;
        .bigger {
          color: red;
          font-size: 20px;
        }
      }
      .button {
        padding: 10px 30px;
        background-color: #faeff2;
        color: #fff;
        margin-right: 5px;
      }
      .buttonRed {
        padding: 10px 30px;
        background-color: #ee0a24;
        color: #fff;
        margin-right: 5px;
      }
    }
  }
  /deep/.van-nav-bar__left {
    padding: 0;
  }
  .leftArro {
    font-size: 44px;
  }
  /deep/ .van-cell--clickable {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  /deep/.van-radio {
    margin-bottom: 20px;
  }
  .right {
    background-color: #ddfad9;
    .iconicon_zhengque {
      color: #1dc779;
      display: block !important;
    }
  }
  .error {
    background-color: #ffefea;
    .iconicon_cuowu {
      color: #ec5851;
      display: block !important;
    }
  }
  .option {
    display: flex;
    .iconfont {
      display: none;
    }
  }
  .card {
    padding: 30px 30px;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 30px;
      height: 30px;
      border: 1px solid #ccc;
      color: #ccc;
      border-radius: 50%;
      margin: 0 20px 20px 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .liright {
    background-color: #ddfad9;
    color: #1dc779;
  }
  .lifalse {
    background-color: #ffefea;

    color: #ff8b89;
  }
  .liready {
    border-color: #999 !important;
    color: #999 !important;
  }
}
</style>
